<template>
  <div class="member-container">
    <!-- 筛选区域 -->
    <div class="filter-section">
      <el-card class="filter-card" shadow="hover">
              <div class="filter-row-single">
          <div class="filter-item">
            <label class="filter-label">
              <el-icon><Collection /></el-icon>
              成员分类
            </label>
            <el-select
              v-model="value1"
              multiple
              clearable
              collapse-tags
              collapse-tags-tooltip
              @change="change"
              placeholder="请选择研究方向"
              class="filter-select"
              size="default"
            >
              <el-option
                v-for="item in data.domain"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <div class="option-content">
                  <span class="option-name">{{ item.name }}</span>
                  <el-tag size="small" type="info" class="option-count">
                    {{ item.index }}人
                  </el-tag>
                </div>
              </el-option>
            </el-select>
          </div>

          <div class="filter-item">
            <label class="filter-label">
              <el-icon><Calendar /></el-icon>
              年级分类
            </label>
            <el-select
              v-model="value2"
              multiple
              clearable
              collapse-tags
              collapse-tags-tooltip
              @change="change"
              placeholder="请选择年级"
              class="filter-select"
              size="default"
            >
              <el-option
                v-for="item in data.grade"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 成员展示区域 -->
    <div class="content-section">
      <div
        class="grade-section"
        v-for="(item, index) in data.changeGrade"
        :key="item.value"
      >
        <el-card class="grade-card" shadow="hover">
          <template #header>
            <div class="grade-header">
              <div class="grade-title">
                <el-icon class="grade-icon"><Trophy /></el-icon>
                <h2>{{ item.label }}</h2>
                <el-tag
                  :type="item.value === 'teacher' ? 'warning' : 'primary'"
                  size="large"
                  class="member-count"
                >
                  {{ data.changeMydate[item.value]?.length || 0 }}人
                </el-tag>
              </div>
              <el-divider class="grade-divider" />
            </div>
          </template>

          <div class="members-grid">
            <div
              class="member-item"
              v-for="(member, memberIndex) in data.changeMydate[item.value]"
              :key="memberIndex + 's'"
            >
              <self-card :info="member" />
            </div>
          </div>

          <!-- 空状态 -->
          <el-empty
            v-if="!data.changeMydate[item.value] || data.changeMydate[item.value].length === 0"
            description="暂无成员数据"
            :image-size="120"
          />
        </el-card>
      </div>

      <!-- 全局空状态 -->
      <div v-if="data.changeGrade.length === 0" class="empty-state">
        <el-empty
          description="没有找到符合条件的成员"
          :image-size="200"
        >
          <el-button type="primary" @click="resetFilters">重置筛选条件</el-button>
        </el-empty>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import {
  User,
  Filter,
  Collection,
  Calendar,
  Trophy
} from '@element-plus/icons-vue'
import SelfCard from '../components/other/selfCard.vue'
import axios from '../utils/Axios'
import base from '../api/base'

const value1 = ref([])
const value2 = ref([])

const data = reactive({
  memberInfo: [],
  domain: [],
  grade: [],
  changeMydate: {},
  changeGrade: [],
})

// 重置筛选条件
const resetFilters = () => {
  value1.value = []
  value2.value = []
  change()
}

axios.get(base.getMemberInfo).then(res => {
  console.log(res.domainList)
  data.domain = res.domainList
  data.memberInfo = res.memberList

  data.memberInfo.forEach(i => {
    if(i.homePage == null){
      i.homePage = 0
    }
    if(i.job == null){
      i.job = 0
    }
    if(i.resume == null){
      i.resume = 0
    }
  })
  data.domain = filterDomainNum(data.domain, data.memberInfo)
  let { myDate, grade } = filterGrade(data.memberInfo)
  data.changeGrade = data.grade = grade
  data.changeMydate = myDate
})

function change() {
  let { myDate, grade } = filterGrade(data.memberInfo)
  data.changeGrade = grade
  data.changeMydate = myDate
  if (value2.value[0]) {
    data.changeGrade = data.grade.filter(item => {
      return Boolean(value2.value.indexOf(item.value) + 1)
    })
  }
  if (value1.value[0]) {
    data.changeGrade.forEach(item => {
      data.changeMydate[item.value] = data.changeMydate[item.value].filter(
        item => {
          return Boolean(value1.value.indexOf(item.domain) + 1)
        }
      )
      if (data.changeMydate[item.value][0] == undefined) {
        data.changeGrade = data.changeGrade.filter(item2 => {
          return !(item2.value == item.value)
        })
      }
    })
  }
}

function filterDomainNum(domain, memberInfo) {
  const domains = domain.map(item => {
    let num = 0
    for (const i of memberInfo) {
      if (item.id === i.domain) {
        ++num
      }
    }
    return {
      id: item.id,
      name: item.name,
      index: num,
    }
  })
  return domains
}

function filterGrade(memberInfo) {
  let myDate = {}
  let grade = []
  memberInfo.forEach(item => {
    if (item.user.status == 3) {
      if (myDate['teacher'] == undefined) {
        myDate['teacher'] = new Array()
        grade.push({
          label: '指导老师',
          value: 'teacher',
        })
      }
      myDate['teacher'].push(item)
    } else {
      let num = parseInt(item.id.substring(0, 4)) + 4
      if (myDate[num] == undefined) {
        myDate[num] = new Array()
        grade.push({
          label: num + '届',
          value: num + '',
        })
      }
      myDate[num].push(item)
    }
  })
  return {
    myDate,
    grade,
  }
}
</script>

<style scoped lang="scss">
.member-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding-top: 80px;
}

// 页面头部样式
.page-header {
  text-align: center;
  margin-bottom: 20px;
  color: #2c3e50;
}

.page-title {
  font-size: 2.2rem;
  font-weight: 600;
  margin: 0 0 5px 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  letter-spacing: -0.5px;
}

@media (max-width: 768px) {
  .page-title {
    font-size: 1.8rem;
  }
}

// 筛选区域样式
.filter-section {
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: 0 20px;
  
  .filter-card {
    border-radius: 8px;
    border: none;
    
    :deep(.el-card__header) {
      background: white;
      color: #2c3e50;
      border-radius: 8px 8px 0 0;
      padding: 12px 20px;
      border-bottom: 1px solid #e4e7ed;
      
      .filter-header {
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 600;
        font-size: 14px;
        
        .filter-icon {
          font-size: 16px;
        }
      }
    }
    
    :deep(.el-card__body) {
      padding: 20px;
    }
  }
  
  .filter-row-single {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    
    .filter-item {
      flex: 1;
      
      .filter-label {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 8px;
        font-weight: 600;
        color: #2c3e50;
        font-size: 13px;
      }
      
      .filter-select {
        width: 100%;
        
        :deep(.el-select__wrapper) {
          border-radius: 6px;
          box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
          transition: all 0.3s ease;
          
          &:hover {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
          }
        }
      }
    }
  }
}

// 选项内容样式
.option-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  
  .option-name {
    flex: 1;
  }
  
  .option-count {
    margin-left: 8px;
  }
}

// 内容区域样式
.content-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
  
  .grade-section {
    margin-bottom: 30px;
    
    .grade-card {
      border-radius: 12px;
      border: none;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
      }
      
      :deep(.el-card__header) {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        color: white;
        border-radius: 12px 12px 0 0;
        padding: 20px 30px;
        
        .grade-header {
          .grade-title {
            display: flex;
            align-items: center;
            gap: 12px;
            
            .grade-icon {
              font-size: 24px;
            }
            
            h2 {
              margin: 0;
              font-size: 24px;
              font-weight: 700;
              flex: 1;
            }
            
            .member-count {
              font-size: 14px;
              font-weight: 600;
            }
          }
          
          .grade-divider {
            margin: 15px 0 0;
            border-color: rgba(255, 255, 255, 0.3);
          }
        }
      }
      
      :deep(.el-card__body) {
        padding: 30px;
      }
    }
    
    .members-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
      gap: 20px;
      
      .member-item {
        transition: transform 0.3s ease;
        
        &:hover {
          transform: scale(1.02);
        }
      }
    }
  }
  
  .empty-state {
    text-align: center;
    padding: 60px 20px;
    
    :deep(.el-empty__description) {
      color: #6c757d;
      font-size: 16px;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .member-container {
    padding-top: 60px;
  }
  
  .page-header {
    margin-bottom: 15px;
    
    .page-title {
      font-size: 1.8rem;
      margin-bottom: 3px;
    }
  }
  
  .filter-section {
    padding: 0 15px;
    margin-bottom: 15px;
    
    .filter-card {
      :deep(.el-card__header) {
        padding: 10px 15px;
        
        .filter-header {
          font-size: 13px;
          
          .filter-icon {
            font-size: 14px;
          }
        }
      }
      
      :deep(.el-card__body) {
        padding: 15px;
      }
    }
    
    .filter-row-single {
      flex-direction: column;
      gap: 15px;
      
      .filter-item {
        margin-bottom: 0;
        
        .filter-label {
          font-size: 12px;
          margin-bottom: 6px;
        }
      }
    }
  }
  
  .content-section {
    padding: 0 15px 30px;
    
    .grade-section {
      .grade-card {
        :deep(.el-card__header) {
          padding: 15px 20px;
          
          .grade-title {
            h2 {
              font-size: 20px;
            }
            
            .grade-icon {
              font-size: 20px;
            }
          }
        }
        
        :deep(.el-card__body) {
          padding: 20px;
        }
      }
      
      .members-grid {
        grid-template-columns: 1fr;
        gap: 15px;
      }
    }
  }
}

@media (max-width: 480px) {
  .page-header {
    .page-title {
      font-size: 1.6rem;
    }
  }
  
  .filter-section {
    .filter-card {
      :deep(.el-card__header) {
        padding: 8px 12px;
      }
      
      :deep(.el-card__body) {
        padding: 12px;
      }
    }
    
    .filter-row-single {
      .filter-item {
        margin-bottom: 12px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  
  .content-section {
    .grade-section {
      .grade-card {
        :deep(.el-card__body) {
          padding: 15px;
        }
      }
      
      .members-grid {
        grid-template-columns: 1fr;
      }
    }
  }
}
</style>
